<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>


<title>烟草客户订单管理 - 云超市</title>

<style type="text/css">
    .customBtn {
        line-height: 20px;
        margin-bottom: 3px;
    }

    .btnLine {
        margin-left: 1px;
        margin-top: 8px;
        margin-bottom: 2px;
    }
</style>
<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jquery-ui/jquery-ui.css"/>
<link rel="stylesheet"
      href="${contextPath}/static/ace/components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="${contextPath}/static/ace/components/_mod/jqgrid/ui.jqgrid.css"/>

<div class="row">
    <div class="row btnLine">
        <div class="button-len col-sm-12">
            <!-- <button class="btn btn-white btn-sm btn-purple customBtn" id="addCargo">
                <i class="ace-icon fa fa-plus-circle purple"></i> 新增
            </button> -->

            <!-- 	<button class="btn btn-white btn-info btn-sm customBtn" id="editShop">
                    <i class="ace-icon fa fa-pencil blue"></i> 授权
                </button>
 -->
            <!-- <button class="btn btn-white btn-info btn-sm customBtn" id="deleteCargo">
                <i class="ace-icon fa fa-trash-o red"></i> 删除
            </button> -->
            <input class="input-sm" type="text" id="slsmanNameInput" style="margin-left: 5px;"
                   placeholder="订单编号">
            <input class="input-sm" type="text" id="channelNameInput" style="margin-left: 0px;"
                   placeholder="专卖证号">
            <button class="btn btn-sm btn-white btn-info search-len customBtn"
                    onclick="searchCgtCust()">
                <i class="ace-icon fa fa-search orange"></i>搜索
            </button>
        </div>
    </div>
    <div class="col-xs-12">

        <table id="grid-table"></table>

        <div id="grid-pager"></div>

    </div>
</div>
<!-- 通知的modal -->
<div class="hide" id="sendMessageModal">
    <div style="margin-top: 24px; text-align: center;">
        <strong>通知内容：</strong>
        <label class="radio-inline">
            <input type="radio" name="messageType" value="1" checked> 支付成功
        </label>
        <label class="radio-inline">
            <input type="radio" name="messageType" value="0"> 支付失败
        </label>
    </div>
    <div style="margin-top: 10px; text-align: center;">
        <strong>小云消息：</strong>
        <label class="radio-inline">
            <input type="radio" name="sendCloudlingmsg" value="1" checked> 发送小云
        </label>
        <label class="radio-inline">
            <input type="radio" name="sendCloudlingmsg" value="0"> 不发小云
        </label>
    </div>
    <button class="btn btn-sm btn-success" style="margin-left: 309px;margin-top: 20px"
            onclick="sendCloudingMessageConfrim()">确定
    </button>
</div>
<!-- /.modal -->

<!-- 客户订单支付详情 -->
<div id="payInfoContent" class="hide">
    <div id="app">

        <div class="row btnLine">
            <div class="button-len col-sm-12">
                <button class="btn btn-white btn-sm btn-success customBtn" onclick="showsendMessage()">
                    <i class="ace-icon fa fa-comment green"></i> 通知
                </button>

                <button class="btn btn-white btn-info btn-sm customBtn" onclick="searchTransStatus()">
                    <i class="ace-icon glyphicon glyphicon-search blue"></i> 查询交易
                </button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-bordered table-hover table-condensed">
                <thead>
                <tr>
                    <th></th>
                    <th>流水号</th>
                    <th>商户名称</th>
                    <th>银行编号</th>
                    <th>支付时间</th>
                    <th>支付全款(分)</th>
                    <th>支付状态</th>
                    <th>交易类型</th>
                    <th>交易方式</th>
                    <th>银行回执</th>
                    <th>回执时间</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for=" (payInfo,index) in payInfoList">
                    <td><input name="choicePayRow" type="radio" :value="index"></td>
                    <td>{{payInfo.payOrderNo}}</td>
                    <td>{{payInfo.merchantName}}</td>
                    <td>{{payInfo.bankCode}}</td>
                    <td>{{payInfo.payDateStr}}</td>
                    <td>{{payInfo.payAmount}}</td>
                    <td><span v-if="payInfo.payStatus==99" style="color: red;">{{payInfo.payStatusStr}}</span><span
                            v-if="payInfo.payStatus==01" style="color: green">{{payInfo.payStatusStr}}</span></td>
                    <td>{{payInfo.transType}}</td>
                    <td>{{payInfo.transMethod}}</td>
                    <td>{{payInfo.bankRetMsg}}</td>
                    <td>{{payInfo.bankRetDateStr}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 客户相关信息modal -->
<div id="userInfoContent" class="hide">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                  data-toggle="tab">基本信息</a></li>
        <li><a href="#profile" data-toggle="tab">授权信息</a></li>
        <li><a href="#bankinfo" data-toggle="tab">绑卡信息</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content" id="userInfoApp">
        <div role="tabpanel" class="tab-pane active" id="home">


            <%--      <div class="table-responsive">
                      <table class="table table-bordered table-hover table-condensed">

                          <tbody>
                          <tr>
                              <td><strong>机构名称：</strong></td>
                              <td>{{basicInfo.channelName}}</td>
                              <td>sfds</td>
                              <td>sdf</td>
                          </tr>
                          <tr>
                              <td>sdf</td>
                              <td>sfsd</td>
                              <td>sfds</td>
                              <td>sdf</td>
                          </tr>
                          <tr>
                              <td>sdf</td>
                              <td>sfsd</td>
                              <td>sfds</td>
                              <td>sdf</td>
                          </tr>
                          <tr>
                              <td>sdf</td>
                              <td>sfsd</td>
                              <td>sfds</td>
                              <td>sdf</td>
                          </tr>
                          <tr>
                              <td>sdf</td>
                              <td>sfsd</td>
                              <td>sfds</td>
                              <td>sdf</td>
                          </tr>
                          <tr>
                              <td>sdf</td>
                              <td>sfsd</td>
                              <td>sfds</td>
                              <td>sdf</td>
                          </tr>
                          <tr>
                              <td>sdf</td>
                              <td>sfsd</td>
                              <td>sfds</td>
                              <td>sdf</td>
                          </tr>
                          <tr>
                              <td>sdf</td>
                              <td>sfsd</td>
                              <td>sfds</td>
                              <td>sdf</td>
                          </tr>
                          </tbody>
                      </table>
                  </div>--%>


            <div class="widget-body">
                <div class="widget-main padding-24">
                    <div class="row">
                        <div class="col-sm-6">
                            <ul class="list-unstyled spaced">
                                <li>
                                    <i class="ace-icon fa fa-caret-right blue"></i><strong>机构名称：</strong>{{basicInfo.channelName}}
                                </li>

                                <li>
                                    <i class="ace-icon fa fa-caret-right blue"></i><strong>机构名称：</strong>{{basicInfo.orgCode}}
                                </li>

                                <li>
                                    <i class="ace-icon fa fa-caret-right blue"></i><strong>客户经理：</strong>{{basicInfo.slsmanName}}
                                </li>

                                <li>
                                    <i class="ace-icon fa fa-caret-right blue"></i><strong>客户名称：</strong>{{basicInfo.custName}}
                                </li>

                                <li>
                                    <i class="ace-icon fa fa-caret-right blue"></i><strong>专卖证号：</strong>{{basicInfo.custCode}}
                                </li>

                                <li>
                                    <i class="ace-icon fa fa-caret-right blue"></i><strong>密码：</strong>{{basicInfo.custPassword}}
                                </li>
                                <li>
                                    <i class="ace-icon fa fa-caret-right blue"></i><strong>商户名称：</strong>{{merchant.merchantName}}
                                </li>

                                <li>
                                    <i class="ace-icon fa fa-caret-right blue"></i><strong>客户地址：</strong>{{basicInfo.custAddr}}
                                </li>
                            </ul>
                        </div>

                        <div class="col-sm-6">
                            <ul class="list-unstyled spaced">
                                <li>
                                    <i class="ace-icon fa fa-caret-right green"></i><strong>订烟日：</strong>{{basicInfo.orderDateStr}}
                                </li>

                                <li>
                                    <i class="ace-icon fa fa-caret-right green"></i><strong>订烟起始时间：</strong>{{basicInfo.orderBeginTimeStr}}
                                </li>

                                <li>
                                    <i class="ace-icon fa fa-caret-right green"></i><strong>订烟结束时间：</strong>{{basicInfo.orderEndTimeStr}}
                                </li>

                                <li>
                                    <i class="ace-icon fa fa-caret-right green"></i><strong>下一订烟日：</strong>{{basicInfo.nextOrderDateStr}}
                                </li>

                                <li>
                                    <i class="ace-icon fa fa-caret-right green"></i><strong>订烟开始日期：</strong>{{basicInfo.beginDateStr}}
                                </li>

                                <li>
                                    <i class="ace-icon fa fa-caret-right green"></i><strong>订烟结束日期：</strong>{{basicInfo.endDateStr}}
                                </li>
                                <li>
                                    <i class="ace-icon fa fa-caret-right green"></i><strong>商户代码：</strong>{{merchant.merchantCode}}
                                </li>
                                <li>
                                    <i class="ace-icon fa fa-caret-right green"></i><strong>银行代码：</strong>{{merchant.bankCode}}
                                </li>

                            </ul>
                        </div>
                    </div><!-- /.col -->
                </div>
            </div>
        </div>

        <div role="tabpanel" class="tab-pane" id="profile">

            <div class="table-responsive">
                <table class="table table-bordered table-hover table-condensed">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>手机号</th>
                        <th>授权状态</th>
                        <th>修改时间</th>
                        <th>创建时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for=" (authorizationInfo, index) in authorizationInfoList">
                        <td>{{index+1}}</td>
                        <td>{{authorizationInfo.username}}</td>
                        <td>{{authorizationInfo.phone}}</td>
                        <td>{{authorizationInfo.stateStr}}</td>
                        <td>{{authorizationInfo.stateDateStr}}</td>
                        <td>{{authorizationInfo.createDateStr}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div role="tabpanel" class="tab-pane" id="bankinfo">

            <div class="table-responsive">
                <table class="table table-bordered table-hover table-condensed">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>银行编号</th>
                        <th>银行名称</th>
                        <th>卡类型</th>
                        <th>卡号</th>
                        <th>卡号后四位</th>
                        <th>签约号</th>
                        <th>绑卡手机号</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for=" (bankInfo, index) in bankInfoList">
                        <td>{{index+1}}</td>
                        <td>{{bankInfo.bankNo}}</td>
                        <td><img style="width: 20px;height: 20px; margin-right: 5px;"
                                 :src="'http://clouderp.combinedpay.cn:20081/'+bankInfo.bankIcon">{{bankInfo.bankName}}
                        </td>
                        <td><span v-if="bankInfo.cardType=='01'">贷记卡</span><span
                                v-if="bankInfo.cardType=='02'">借记卡</span></td>
                        <td>{{bankInfo.cardNo}}</td>
                        <td>{{bankInfo.last4}}</td>
                        <td>{{bankInfo.bindId}}</td>
                        <td>{{bankInfo.nbr}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- page specific plugin scripts -->
<script type="text/javascript">
    var scripts = [null, "${contextPath}/static/ace/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js", "${contextPath}/static/ace/components/jqGrid/js/jquery.jqGrid.js", "${contextPath}/static/ace/components/jqGrid/js/i18n/grid.locale-cn.js", null]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {

        jQuery(function ($) {
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";


            var parent_column = $(grid_selector).closest('[class*="col-"]');
            //resize to fit page size
            $(window).on('resize.jqGrid', function () {
                $(grid_selector).jqGrid('setGridWidth', parent_column.width());
            })

            //resize on sidebar collapse/expand
            $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
                if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                    //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                    setTimeout(function () {
                        $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                    }, 20);
                }
            })

            //if your grid is inside another element, for example a tab pane, you should use its parent's width:
            /**
             $(window).on('resize.jqGrid', function () {
			var parent_width = $(grid_selector).closest('.tab-pane').width();
			$(grid_selector).jqGrid( 'setGridWidth', parent_width );
		})
             //and also set width when tab pane becomes visible
             $('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
		  if($(e.target).attr('href') == '#mygrid') {
			var parent_width = $(grid_selector).closest('.tab-pane').width();
			$(grid_selector).jqGrid( 'setGridWidth', parent_width );
		  }
		})
             */





            jQuery(grid_selector).jqGrid({
                //direction: "rtl",

                //subgrid options
                subGrid: false,
                //subGridModel: [{ name : ['No','Item Name','Qty'], width : [55,200,80] }],
                subGridOptions: {
                    plusicon: "ace-icon fa fa-plus center bigger-110 blue",
                    minusicon: "ace-icon fa fa-minus center bigger-110 blue",
                    openicon: "ace-icon fa fa-chevron-right center orange"
                },
                //for this example we are using local data
                subGridRowExpanded: function (subgridDivId, rowId) {
                    var subgridTableId = subgridDivId + "_t";
                    $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
                    $("#" + subgridTableId).jqGrid({
                        datatype: 'json',
                        //data: subgrid_data,
                        url: "${contextPath}/sys/clouderp/getSubCgtCustInfo?parentId=" + rowId,
                        colNames: ['', 'ID', '用户姓名', '手机号', '授权情况', '最近修改时间', '创建时间'],
                        colModel: [
                            {
                                name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                                editable: false,
                                search: false,
                                sortable: false,
                                formatter: changeCgtCust

                            },
                            {name: 'id', width: 50, hidden: true},
                            {name: 'username', width: 150},
                            {name: 'phone', width: 150},
                            {name: 'stateStr', width: 150},
                            {name: 'stateDateStr', width: 150},
                            {name: 'createDateStr', width: 150}
                        ],
                        jsonReader: {
                            root: "recordList",
                            page: "currentPage",
                            total: "pageCount",
                            records: "recordCount"
                        }
                    });
                },


                //data: grid_data,
                url: "${contextPath}/sys/clouderp/getSPLOrderInfo",
                datatype: "json",
                mtype: 'POST',
                height: 250,
                colNames: ['订单编号', '订烟时间', '机构代码', '机构名称', '客户经理', '专卖证号', '类型', '订单状态', '支付状态', '数量', '金额', '创建人','', '操作时间'],
                colModel: [
                    /*{name:'myac',index:'', width:40, fixed:true, sortable:false, resize:false,
                     editable : false,
                     search : false,
                     sortable : false,
                     formatter :  synchronizationUnionpay

                     },*/
                    {name: 'id', index: 'id', width: 110, sorttype: "int", sortable: false, editable: true},
                    {name: 'orderTimeStr', index: 'orderTimeStr', width: 70, sortable: false, editable: true},
                    {name: 'channelCode', index: 'channelCode', width: 60, editable: false, sortable: false},
                    {name: 'channelName', index: 'channelName', width: 80, sortable: false, editable: true},
                    {name: 'slsmanName', index: 'slsmanName', width: 80, sortable: false, editable: true},
                    {name: 'custCode', index: 'custCode', width: 90, sortable: false, editable: true, formatter : showUserInfo},
                    {name: 'orderTypeStr', index: 'orderTypeStr', width: 40, sortable: false, editable: true},
                    {name: 'orderStatusStr', index: 'orderStatusStr', width: 50, sortable: true, editable: true},
                    {
                        name: 'payStatusStr',
                        index: 'payStatusStr',
                        width: 60,
                        sortable: false,
                        editable: true,
                        formatter: showPayInfo
                    },
                    {name: 'orderQtySum', index: 'orderQtySum', width: 30, sortable: false, editable: true},
                    {name: 'orderAmtSum', index: 'orderAmtSum', width: 50, sortable: false, editable: true},
                    {name: 'createUsername', index: 'createUsername', width: 50, sortable: false, editable: true},
                    {name: 'createUserPhone', index: 'createUserPhone', width: 90, sortable: false, editable: false,hidden:true},
                    {name: 'modifiTimeStr', index: 'modifiTimeStr', width: 100, sortable: true, editable: true},
                ],
                sortname: "modifiTimeStr",
                sortorder: "desc",
                viewrecords: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: pager_selector,
                altRows: true,
                //toppager: true,

                multiselect: false,
                //multikey: "ctrlKey",
                multiboxonly: true,

                loadComplete: function () {
                    var table = this;
                    setTimeout(function () {
                        styleCheckbox(table);

                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },

                editurl: "${contextPath}/static/ace/dummy.php",//nothing is saved
                caption: "烟草客户订单",
                jsonReader: {
                    root: "recordList",
                    page: "currentPage",
                    total: "pageCount",
                    records: "recordCount"
                }
                //,autowidth: true,


                /**
                 ,
                 grouping:true,
                 groupingView : {
				 groupField : ['name'],
				 groupDataSorted : true,
				 plusicon : 'fa fa-chevron-down bigger-110',
				 minusicon : 'fa fa-chevron-up bigger-110'
			},
                 caption: "Grouping"
                 */

            });
            $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size


            //enable search/filter toolbar
            //jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
            //jQuery(grid_selector).filterToolbar({});


            //switch element when editing inline
            function aceSwitch(cellvalue, options, cell) {
                setTimeout(function () {
                    $(cell).find('input[type=checkbox]')
                        .addClass('ace ace-switch ace-switch-5')
                        .after('<span class="lbl"></span>');
                }, 0);
            }

            function changeCgtCust(cellvalue, options, cell) {
                var template = '<span class="ace-icon fa fa-flag bigger-120 green" onclick="javascript:authorization(\'' + cell.id + '\',1,\'' + options.gid + '\',\'' + cell.state + '\');" title="授权"></span><span style="margin-left: 10px;" class="ace-icon fa fa-exclamation-triangle bigger-120 red" onclick="javascript:authorization(\'' + cell.id + '\',0,\'' + options.gid + '\',\'' + cell.state + '\');" title="取消授权"></span><span class="ace-icon fa fa-comment bigger-120 blue" style="margin-left: 10px;" onclick="javascript:sendCloudingMessage(\'' + cell.phone + '\',\'' + cell.username + '\');" title="发送小云消息"></span>';
                return template;
            }

            function showUserInfo(cellvalue, options, cell){
                template = '<a title="查看客户信息" href="javascript:getUserInfo(\''+cell.custCode+'\');">'+cell.custCode+'</a>';
                return template;
            }


            function synchronizationUnionpay(cellvalue, options, cell) {
                var template = '<span style="margin-left: 8px;" class="ace-icon fa fa-recycle bigger-120 green" onclick="javascript:void(0)" title="同步到银联"></span>';
                return template;
            }

            function showPayInfo(cellvalue, options, cell) {
                var status = cell.payStatusStr;
                var style = '';
                switch (status) {
                    case "未支付" :
                        style = 'style="color: #7B3F25;"';
                        break;
                    case "支付成功" :
                        style = 'style="color: green;"';
                        break;
                    case "付款中" :
                        style = 'style="color: blue;"';
                        break;
                    case "支付失败" :
                        style = 'style="color: red;"';
                        break;
                    default:
                        break;
                }
                template = '<a ' + style + ' title="点击查看支付详情" href="javascript:getPayInfo(\'' + cell.id + '\',\'' + cell.custCode + '\',\'' + cell.createUserPhone + '\');">' + cell.payStatusStr + '</a>';
                return template;
            }

            //enable datepicker
            function pickDate(cellvalue, options, cell) {
                setTimeout(function () {
                    $(cell).find('input[type=text]')
                        .datepicker({format: 'yyyy-mm-dd', autoclose: true});
                }, 0);
            }


            //navButtons
            jQuery(grid_selector).jqGrid('navGrid', pager_selector,
                { 	//navbar options
                    edit: false,
                    editicon: 'ace-icon fa fa-pencil blue',
                    add: false,
                    addicon: 'ace-icon fa fa-plus-circle purple',
                    del: false,
                    delicon: 'ace-icon fa fa-trash-o red',
                    search: false,
                    searchicon: 'ace-icon fa fa-search orange',
                    refresh: true,
                    refreshicon: 'ace-icon fa fa-refresh green',
                    view: false,
                    viewicon: 'ace-icon fa fa-search-plus grey',
                },
                {
                    //edit record form
                    //closeAfterEdit: true,
                    //width: 700,
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                },
                {
                    //new record form
                    //width: 700,
                    closeAfterAdd: true,
                    recreateForm: true,
                    viewPagerButtons: false,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                            .wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                },
                {
                    //delete record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        if (form.data('styled')) return false;

                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_delete_form(form);

                        form.data('styled', true);
                    },
                    onClick: function (e) {
                        //alert(1);
                    }
                },
                {
                    //search form
                    recreateForm: true,
                    afterShowSearch: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                        style_search_form(form);
                    },
                    afterRedraw: function () {
                        style_search_filters($(this));
                    }
                    ,
                    multipleSearch: true,
                    /**
                     multipleGroup:true,
                     showQuery: true
                     */
                },
                {
                    //view record form
                    recreateForm: true,
                    beforeShowForm: function (e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    }
                }
            )


            function style_edit_form(form) {
                //enable datepicker on "sdate" field and switches for "stock" field
                form.find('input[name=sdate]').datepicker({format: 'yyyy-mm-dd', autoclose: true})

                form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
                //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
                //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');


                //update buttons classes
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
                buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

                buttons = form.next().find('.navButton a');
                buttons.find('.ui-icon').hide();
                buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
                buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
            }

            function style_delete_form(form) {
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
                buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
            }

            function style_search_filters(form) {
                form.find('.delete-rule').val('X');
                form.find('.add-rule').addClass('btn btn-xs btn-primary');
                form.find('.add-group').addClass('btn btn-xs btn-success');
                form.find('.delete-group').addClass('btn btn-xs btn-danger');
            }

            function style_search_form(form) {
                var dialog = form.closest('.ui-jqdialog');
                var buttons = dialog.find('.EditTable')
                buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
                buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
                buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
            }

            function beforeDeleteCallback(e) {
                var form = $(e[0]);
                if (form.data('styled')) return false;

                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_delete_form(form);

                form.data('styled', true);
            }

            function beforeEditCallback(e) {
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_edit_form(form);
            }


            //it causes some flicker when reloading or navigating grid
            //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
            //or go back to default browser checkbox styles for the grid
            function styleCheckbox(table) {
                /**
                 $(table).find('input:checkbox').addClass('ace')
                 .wrap('<label />')
                 .after('<span class="lbl align-top" />')


                 $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                 .find('input.cbox[type=checkbox]').addClass('ace')
                 .wrap('<label />').after('<span class="lbl align-top" />');
                 */
            }


            //unlike navButtons icons, action icons in rows seem to be hard-coded
            //you can change them like this in here if you want
            function updateActionIcons(table) {
                /**
                 var replacement =
                 {
                     'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
                     'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
                     'ui-icon-disk' : 'ace-icon fa fa-check green',
                     'ui-icon-cancel' : 'ace-icon fa fa-times red'
                 };
                 $(table).find('.ui-pg-div span.ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
                 */
            }

            //replace icons with FontAwesome icons like above
            function updatePagerIcons(table) {
                var replacement =
                    {
                        'ui-icon-seek-first': 'ace-icon fa fa-angle-double-left bigger-140',
                        'ui-icon-seek-prev': 'ace-icon fa fa-angle-left bigger-140',
                        'ui-icon-seek-next': 'ace-icon fa fa-angle-right bigger-140',
                        'ui-icon-seek-end': 'ace-icon fa fa-angle-double-right bigger-140'
                    };
                $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                    if ($class in replacement) icon.attr('class', 'ui-icon ' + replacement[$class]);
                })
            }

            function enableTooltips(table) {
                $('.navtable .ui-pg-button').tooltip({container: 'body'});
                $(table).find('.ui-pg-div').tooltip({container: 'body'});
            }

            //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

            $(document).one('ajaxloadstart.page', function (e) {
                $.jgrid.gridDestroy(grid_selector);
                $('.ui-jqdialog').remove();
            });
        });
    });
</script>
<script src="${contextPath}/static/system/js/common/vue.js"></script>
<script src="${contextPath}/static/layer/layer.js"></script>



<script type="text/javascript">
    /**
     * 搜索烟草客户订单信息
     */
    function searchCgtCust() {
        var channelName = $("#channelNameInput").val();
        var slsmanName = $("#slsmanNameInput").val();
        //var parentDepartmentkey = $("#id_parentDepartmentkey_name").val();

        var filters = {
            "rules": [{
                "field": "channelName",
                "data": channelName
            }, {
                "field": "slsmanName",
                "data": slsmanName
            }]
        };
        jQuery("#grid-table").jqGrid('setGridParam', {
            postData: {
                "filters": JSON.stringify(filters) //"{'rules' : [{'field' : 'shopName','data' : "+shopName+"},{'field' : 'state','data' : "+state+"}]}"
            }
        }).trigger("reloadGrid");
    }

    function authorization(id, flag, gid, state) {
        //$.jgrid.info_dialog("提示：", "请选择一条信息", $.jgrid.edit);
        var message = "";
        if (flag == 1) {
            if (state == 1) {
                $.jgrid.info_dialog("提示：", "当前用户已经授权");
                return;
            }
            message = "确定要授权吗？"
        } else if (flag == 0) {
            if (state == 0) {
                $.jgrid.info_dialog("提示：", "当前用户已经取消授权");
                return;
            }
            message = "确定要取消授权吗？"
        }
        if (window.confirm(message)) {
            $.ajax({
                url: '${contextPath}/sys/clouderp/accreditCgtCust',
                data: {
                    id: id,
                    flag: flag,
                },
                type: 'POST',
                dataType: 'json',
                success: function (data) {

                    if (data.success) {
                        $("#" + gid).trigger('reloadGrid');
                    } else {
                        $.jgrid.info_dialog("提示：", data.message);
                    }
                },
                error: function (error) {
                    $.jgrid.info_dialog("提示：", "服务器错误，稍后重试");
                }
            });
        }

    }
    var closeLayerIndex = null;
    function showsendMessage() {
        var index = $("input[name='choicePayRow']:checked").val();
        if (index == undefined) {
            layer.msg("请选择支付记录");
            return
        }
        var payInfo = app.payInfoList[index]
        app.payInfo = payInfo;
        $("#sendMessageModal").removeClass("hide")
        closeLayerIndex = layer.open({
            type: 1,
            title: '通知',
            closeBtn: 1,
            shadeClose: true,
            area: ['400px', '200px'],
            skin: 'yourclass',
            content: $("#sendMessageModal"),
            end: function () {
                $("#sendMessageModal").addClass("hide")
            }
        });

    }
    function sendCloudingMessageConfrim() {
        var tradeFlag = $("input[name='messageType']:checked").val();
        var isSendCloudlingMsg = $("input[name='sendCloudlingmsg']:checked").val();

        //alert(tradeFlag + "--" + isSendCloudlingMsg + "--" + app.custCode + "--" + app.orderId + "--" + app.userPhone + "--" + app.payInfo.payOrderNo + "--" + app.payInfo.payAmount);
        layer.load(1);
        $.ajax({
            url: '${contextPath}/sys/clouderp/notificationUser',
            data: {
                tradeFlag: tradeFlag,
                isSendCloudlingMsg: isSendCloudlingMsg,
                custCode: app.custCode,
                orderId: app.orderId,
                userPhone: app.userPhone,
                payOrderNo: app.payInfo.payOrderNo,
                orderAmount: app.payInfo.payAmount
            },
            type: 'POST',
           // async: false,
            dataType: 'json',
            success: function (data) {
                layer.closeAll('loading');
                if (data.success) {
                    layer.close(closeLayerIndex)
                }
                layer.msg(data.message);

            },
            error: function (error) {
                layer.closeAll('loading');
                layer.msg("服务器异常，稍后再试");
            }
        })

    }

    var app = new Vue({
        el: '#app',
        data: {
            payInfoList: [],
            orderId: '',
            custCode: '',
            userPhone: '',
            payInfo: {}
        }
    })

    var getPayInfo = function (orderId, custCode, userPhone) {
        //console.log(orderId + custCode + userPhone)
        layer.load(1);
        $.ajax({
            url: '${contextPath}/sys/clouderp/getPayInfo?orderId=' + orderId,
            //async: false,
            success: function (data) {
                layer.closeAll('loading');
                if (data.success) {
                    var result = data.data;
                    // console.log(result.length);
                    if (result.length == 0) {
                        $.jgrid.info_dialog("提示：", "该订单没有支付数据");
                        return;
                    }
                    app.payInfoList = result;
                    app.orderId = orderId
                    app.custCode = custCode
                    app.userPhone = userPhone
                    $("#payInfoContent").removeClass("hide")
                    layer.open({
                        type: 1,
                        title: '客户订单支付详情',
                        closeBtn: 1,
                        shadeClose: true,
                        maxmin: true,
                        area: ['1100px', '600px'],
                        skin: 'yourclass',
                        content: $("#payInfoContent"),
                        end: function () {
                            $("#payInfoContent").addClass("hide")
                        }
                    });

                } else {
                    $.jgrid.info_dialog("提示：", data.message);
                }

            },
            error: function (error) {
                layer.closeAll('loading');
                $.jgrid.info_dialog("提示：", "服务器异常，稍后再试");
            }

        })

    }


    var userInfoApp = new Vue({
        el: '#userInfoApp',
        data: {
            basicInfo: {
                channelName: '--', //营销机构
                orgCode: '--', //营销机构
                slsmanName: '--', //客户经理
                custName: '--', //客户名称
                custCode: '--', //专卖证号
                custPassword: '--', //密码
                orderDateStr: '--', //订烟日
                orderBeginTimeStr: '--', //订烟起始时间
                orderEndTimeStr: '--', //订烟结束时间
                nextOrderDateStr: '--', //下一订烟日
                beginDateStr: '--', //订烟开始日期
                endDateStr: '--', //订烟结束日期
                custAddr: '--' //客户地址

            },
            merchant: {
                merchantCode: '--',
                merchantName: '--',
                merchantId: '--',
                bankCode: '--',
            },
            authorizationInfoList: [
                {
                    username: '--',
                    phone: '--',
                    stateStr: '--',
                    stateDateStr: '--', //修改时间
                    createDateStr: '--' //创建时间
                }, {
                    username: '--',
                    phone: '--',
                    stateStr: '--',
                    stateDateStr: '--', //修改时间
                    createDateStr: '--' //创建时间
                }
            ],
            bankInfoList: [
                {}, {}
            ],
        }
    })

    var searchTransStatus = function () {
        var index = $("input[name='choicePayRow']:checked").val();
        if (index == undefined) {
            layer.msg("请选择支付记录");
            return
        }
        var payInfo = app.payInfoList[index]
        layer.load(1);
        $.ajax({
            url: '${contextPath}/sys/clouderp/getTransStatusInfo',
            data: {
                custCode: app.custCode,
                merchantCode: payInfo.merchantCode,
                payOrderNo: payInfo.payOrderNo,
                transDateStr : payInfo.transDateStr
            },
            type: 'POST',
            //async: false,
            dataType: 'json',
            success: function (data) {
                layer.closeAll('loading');
                if (data.success) {
                    var result = data.data
                    //result.respCode result.respMsg
                    var respCode =  result.respCode==undefined ? "" : result.respCode
                    var respMsg =  result.respMsg==undefined ? "" : result.respMsg
                    layer.open({
                        title: '交易信息',
                        closeBtn: 0,
                        shadeClose: true,
                        skin: 'yourclass',
                        content: '<div><strong>交易代码：</strong>' + respCode + '</div><div><strong>交易信息：</strong>' + respMsg + '</div>',
                    });
                } else {
                    layer.msg(data.message);
                }

            },
            error: function (error) {
                layer.closeAll('loading');
                layer.msg("服务器异常，稍后再试");
            }
        })

    }

    var  getUserInfo = function(custCode)  {
        layer.load(1);
        //alert(custCode);
        $.ajax({
            url : '${contextPath}/sys/clouderp/getUserInfo?custCode='+custCode,
            // async : false,
            success : function (data) {
                layer.closeAll('loading');
                if(data.success){
                    var result = data.data;
                    //console.log(result)
                    userInfoApp.basicInfo = result.basicInfo;
                    userInfoApp.authorizationInfoList = result.authorizationInfoList;
                    userInfoApp.bankInfoList = result.bankInfoList;
                    if(result.merchant == null || result.merchant == undefined){
                        userInfoApp.merchant = {
                            merchantCode : '',
                            merchantName :'',
                            merchantId :'',
                            bankCode :'',
                        }
                    }else {
                        userInfoApp.merchant = result.merchant
                    }
                    // $("#userInfoModal").modal("show");
                    $("#userInfoContent").removeClass("hide")
                    layer.open({
                        type: 1,
                        title: '客户信息',
                        closeBtn: 1,
                        shadeClose: true,
                        maxmin: true,
                        area: ['1100px', '600px'],
                        skin: 'yourclass',
                        content: $("#userInfoContent"),
                        end: function(){
                            $("#userInfoContent").addClass("hide")
                        }
                    });

                }else{
                    $.jgrid.info_dialog( "提示：", data.message);
                }

            },
            error : function (error) {
                layer.closeAll('loading');
                $.jgrid.info_dialog( "提示：", "服务器异常，稍后再试");
            }

        })

    }
</script>

<script>
    (function() {
        var url = window.location.href;
        if (url.indexOf('sys/user/home') != -1) {
            url = '${contextPath}/#page/clouderpOrderSplordermobile'
        }else {
            url = '${contextPath}/sys/user/home#page/clouderpOrderSplordermobile'
        }
        if (navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i)) {
            window.location.hash =  '#page/clouderpOrderSplordermobile';
        }
        //window.location.href = 'http://baidu.com';
    })();
</script>